<template>
  <div style="width: 300px;">
    <div class="formBox">
      <el-form :model="form" class="myForm">
        <el-form-item>
          <el-select style="width: 100%;" v-model="form.storeGroupIds" clearable multiple collapse-tags collapse-tags-tooltip v-selectClose placeholder="门店分组">
            <el-option v-for="item in storeGrouping" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="rightForm-item">
          <el-select style="width: 100%;" v-model="form.brandIds" multiple collapse-tags collapse-tags-tooltip filterable v-selectClose clearable
            placeholder="经营品牌">
            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="bottom-line">
            <el-input style="margin-right: 10px;width: 130px;" v-model="form.keywords" clearable placeholder="商户/门店/ID"></el-input>
            <el-button type="success" @click="search">查询</el-button>
            <el-button @click="rest">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-scrollbar class="table">
      <div :class="`storeItem ${storeItemDetail.id === item.id ?'storeItemed':''}`" @click="selectProductItem(item)" v-for="item in tableData" :key="item.id">
        <div class="storeItem-header">
          <div class="storeItem-name ellipsis">{{ item.storeName }}</div>
          <div class="storeItem-id">{{ item.code }}</div>
        </div>
        <div class="flex align-items-center justify-content-center">
          <div v-if="formatText(item.brandId,brandList)" class="storeItem-tag">{{ formatText(item.brandId,brandList) }}</div>
          <div v-if="formatText(item.storeGroupId,storeGrouping)" class="storeItem-groupName">{{formatText(item.storeGroupId,storeGrouping)}}</div>
        </div>
        <div class="storeItem-address">{{ item.enterpriseName }}</div>
      </div>
    </el-scrollbar>
    <div class="myPagination">
      <el-pagination 
        :pager-count="3"
        background
        @current-change="currentChange"
        layout="prev, pager, next" 
        :total="total" 
      />
    </div>
  </div>
</template>

<script setup>
import { useStore } from './hooks'
const { search,
        rest,
        form, 
        brandList, 
        storeGrouping,
        tableData,
        storeItemDetail,
        total } = useStore()
search()
const formatText = (id,arr) => {
  if(!id) return ''
  id = id.split(',')
  return id.map(item => arr.find(f => f.value === item)?.label ?? '').filter(item=>item).join(' / ') || ''
}
const selectProductItem = (item) => {
  storeItemDetail.value = item
}
const currentChange = (val) => {
  form.value.page.current = val
  search()
}

</script>

<style lang="less" scoped>
div{
  box-sizing: border-box;
}
.formBox {
  padding: 0 12px;
  border-bottom: 1px solid #DEDEDE;
}

.table {
  position: relative;
  padding: 16px 12px 12px 12px;
  height: calc(100vh - 365px);
  .storeItem{
    display: flex;
    padding: 12px;
    margin-bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 4px;
    background: #F6F6F6;
    cursor: pointer;
    .storeItem-header{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      width: 100%;
      height: 18px;
    }
    .storeItem-name{
      width: 135px;
      font-size: 16px;
      color: #000;
      font-weight: 600;
    }
    .storeItem-id{
      font-size: 14px;
      color: #222;
    }
    .storeItem-tag{
      margin-right: 8px;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #3480FF;
      font-size: 12px;
      color: #3480FF;
    }
    .storeItem-groupName{
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #FF6B00;
      font-size: 12px;
      color: #FF6B00;
    }
    .storeItem-address{
      font-size: 14px;
      color: #222;
    }
  }
  .storeItemed{
    background: #D6E6FF;
  }
}
.myPagination{
  margin-top: 7px;
  padding-right: 12px;
  display: flex;
  justify-content: flex-end;
}

.w120 {
  width: 120px;
}

.w140 {
  width: 140px;
}

.w260 {
  width: 268px;
}
.bottom-line{
  display: flex;
  align-items: center;
}
</style>